<template>
    <div id="login">
        <div id="contain">
            <div id="left_card">
                <h1>欢迎来到我的Vue3大世界</h1>
                <span>Welcome to my Vue3 world</span>
            </div>
            <div id="right_card">
                <el-card class="el-card">
                    <h2>欢迎登录</h2>
                    <form  class="login" action="">
                        <input v-shake type="text" v-model="userLoginForm.username" placeholder="请输入邮箱">
                        <input v-shake type="password" v-model="userLoginForm.password" placeholder="请输入密码">
                        <input v-shake type="password" v-model="userLoginForm.password1" placeholder="请再次输入密码">
                    </form>
                    <div class="remember">
                        <input type="radio" name="" id="psd" class="radio"><label for="psd"></label>记住密码
                    </div>
                    <div class="message">
                        <span v-html="error"></span>
                    </div>
                    <div id="btn">
                        <button class="loginbtn"  @click="usreList">登陆</button>
                    </div>
                    <div id="btn">
                        <button class="loginbtn"  @click="usreList">注册</button>
                    </div>
                </el-card>
            </div>
        </div>
        
    </div>
    </template>
    
    <script >
    import { useStore } from 'vuex'
    import { useRouter } from 'vue-router'
    import { getCurrentInstance, reactive , ref  } from '@vue/runtime-core'
    import signin from 'C:/Users/荣耀/OneDrive/桌面/项目/项目/ideavr_pro/src/apis/signin.js'
    import { ElMessage } from 'element-plus';
    export default {
        name:"appLogin",
        setup(){
            let userLoginForm = reactive({
                username:"",
                password:"",
                password1:""
            })
            const store = useStore()
            const router = useRouter()
            const { proxy } = getCurrentInstance()
            let error = ref('')
            //获取用户登录信息
            
            async function usreList(){
                console.log(userLoginForm.username)
                if(userLoginForm.password==userLoginForm.password1){
                    console.log(userLoginForm.name)
                   const its= await signin(userLoginForm.username,userLoginForm.password,userLoginForm.username)
                    console.log(its.data.code,"注册码")
                    if(its.data.code===1){
                        ElMessage.warning('注册成功即将在三秒之后跳转至登录页面');
                        await new Promise(resolve => setTimeout(resolve, 3000));
                        router.replace("login")
                    }else{
                        ElMessage.warning('此账号已经存在');
                    }
                }else{
                    ElMessage.warning('两次密码输入不一致');
                }
            }
            //获取用户信息
            async function getUserInfo() {
                    
            }
            return {
                userLoginForm,error, 
                usreList,getUserInfo,
            }    
        } 
    }
    </script>
    //APP.vue里写margin：0；padding：0；
    <style lang="less" scoped>
    @keyframes animate {
        0%{
            filter: hue-rotate(0deg);
        }
        100%{
            filter: hue-rotate(360deg);
        }
    }
    #login{
        position: relative;
        width: 100vw;
        height: 100vh;
        background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.82ece114307f62dc0b8aa2c366b9ef37?rik=GwmaljjvGJ75zg&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1308%2f15%2fc2%2f24494094_1376530595238.jpg&ehk=L%2fNVdWJDsmRvIsmKuuUcvCGnK4DJwpxad4JswscWIN0%3d&risl=&pid=ImgRaw&r=0);
        background-size: 100% 100%;
        background-color:  #a7a8bd;
        #contain{
            height: 400px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            border-radius: 25px;
            border: 1px solid black;
            background-color: rgba(255, 255, 255, 0.1) !important;
            backdrop-filter: blur(5px);
            box-shadow: -5px -5px 10px rgb(39, 65, 65),
                         5px 5px 20px aqua;
            /* 5秒 infinite循环播放无限次 linear匀速  */
            //animation: animate 5s linear infinite;
        }
    }
    #contain{
        display: flex;
        flex-direction:row;
        text-align:center;
        align-items: center;
        #left_card{
            width: 500px;
            h1{
                color: white;
                white-space: nowrap;
            }
            span{
                font-size: 1.2rem;
                text-align:center;
                color: white;
                white-space: nowrap;
            }   
        }
        #right_card{
            width: 400px;
            .el-card{
                margin: 0 45px;
                border-radius: 25px;
                background-color: rgba(255, 255, 255, 0.1);
            }
        }
    }
    #right_card{
        display: flex;
        justify-content: center;
        align-items: center;
        h2{
            margin-bottom: 5px;
        }
        .login{
            input{
                width: 80%;
                height: 45px;
                margin-top: 10px;
                border: 1px solid white;
                background-color: rgba(255, 255, 255, 0.5);
                border-radius: 10px;
                font-size: inherit;
                padding-left: 20px;
                outline: none;
            }
        }
        .remember{
            float: right;
            height: 26px;
            text-align: center;
            font-size: 1rem;
            position: relative;
            .radio{
                height: 1rem;
                width: 1rem;
                vertical-align:middle;
                margin-top: -2px;
                opacity: 0;
            }
            label {
                position: absolute;
                left: -2px;
                top: 5px;
                height: 1rem;
                width: 1rem;
                vertical-align:middle;
                margin-top: -2px;
                border-radius: 50%;
                border: 1px solid black;
            }
            //radio选中后修改labe内的内容 :after 选择器在被选元素的内容后面插入内容。
            input:checked + label::after {
                content: "";
                width: 0.6rem;
                height: 0.6rem;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                border-radius: 50%;
                background-color: rgba(207, 38, 38, 0.8);  
                border: 1px solid rgba(207, 38, 38, 0.8);
            }
        }
        .message{
            margin-top: 26px;
            font-size: 0.9rem;
            color: red;
        }
        .loginbtn{
            width: 100%;
            height: 35px;
            margin-top: 10px;
            border-radius: 10px;
            background-color: rgba(207, 38, 38, 0.8);    
        } 
        
    }
    </style>
    